import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { OperationBarWrapper } from './style'
import { message } from 'antd'
import { useAppSelector } from '@/store'
import {fetchPlayerDetailAction, fetchLyricAction} from '@/views/player/store/player'
import { useAppDispatch } from '@/store'
interface IProps {
  children?: ReactNode
  favorTitle?: string
  shareTitle?: string
  downloadTitle?: string
  commentTitle?: string
}

const SongOperationBar: React.FC<IProps> = (props) => {
  const {favorTitle,shareTitle,downloadTitle,commentTitle} = props

    const { playList } = useAppSelector((state) => ({
    playList: state.ranking.playlist
  }))

    const dispatch = useAppDispatch()
  const playSong = (id: number) => {
    dispatch(fetchPlayerDetailAction({ ids: id }))
    dispatch(fetchLyricAction({ id }))
  }

    function selectItem(itemName: string) {
    messageApi.open({
      type: 'success',
      content: `成功点击了${itemName}`
    })
  }

  const [messageApi, contextHolder] = message.useMessage()

  return (
    <OperationBarWrapper>
        {contextHolder}
      <span className="play">
        <a onClick={()=>{playSong(playList?.tracks[0].id)}} className="play-icon sprite_button">
          <span className="play sprite_button">
            <i className="sprite_button"></i>
            <span>播放</span>
          </span>
        </a>
        <a onClick={()=>{selectItem("播放")}} className="add-icon sprite_button">+</a>
      </span>
      <a onClick={()=>{selectItem("收藏")}} className="item sprite_button">
        <i className="icon favor-icon sprite_button">{favorTitle}</i>
      </a>
      <a onClick={()=>{selectItem("分享转发")}} className="item sprite_button">
        <i className="icon share-icon sprite_button">{shareTitle}</i>
      </a>
      <a onClick={()=>{selectItem("下载")}} className="item sprite_button">
        <i className="icon download-icon sprite_button">{downloadTitle}</i>
      </a>
      <a onClick={()=>{selectItem("评论")}} className="item sprite_button">
        <i className="icon comment-icon sprite_button">{commentTitle}</i>
      </a>
    </OperationBarWrapper>
  )
}

export default memo(SongOperationBar)
